<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>平行四边形几何演示</title>
    <script src="https://cdn.geogebra.org/apps/deployggb.js"></script>
    <style>
        /* Container styling */
        .container {
            display: flex;
            font-family: 'Arial', sans-serif;
            background-color: #2E3B4E;
            color: white;
            padding: 20px;
            gap: 20px;
            min-height: 100vh;
        }

        /* GeoGebra applet container */
        #geogebra-container {
            width: 800px;
            height: 600px;
            border: 2px solid #00FF9D;
            box-shadow: 0 0 15px rgba(100, 255, 220, 0.2);
            background-color: white;
        }

        /* Control panel styling */
        .control-panel {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 15px;
            padding: 15px;
            background-color: rgba(46, 59, 78, 0.9);
            border-radius: 8px;
        }

        /* UI components */
        select, button, input[type="range"] {
            padding: 8px 12px;
            border-radius: 4px;
            border: none;
            background-color: #3C4D6D;
            color: white;
            cursor: pointer;
        }

        button {
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #00FF9D;
            color: #2E3B4E;
        }

        input[type="range"] {
            -webkit-appearance: none;
            height: 8px;
            background: #3C4D6D;
            outline: none;
        }

        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #00FF9D;
            cursor: pointer;
        }

        .button-group {
            display: flex;
            gap: 10px;
        }

        .measurement-panel {
            margin-top: 20px;
            padding: 15px;
            background-color: rgba(60, 77, 109, 0.5);
            border-radius: 8px;
        }

        .measurement-item {
            margin: 8px 0;
        }

        .highlight {
            color: #00FF9D;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- GeoGebra Applet -->
        <div id="geogebra-container"></div>

        <!-- Control Panel -->
        <div class="control-panel">
            <h2>平行四边形几何演示</h2>
            
            <!-- View Mode Selector -->
            <div>
                <label for="viewMode">视图模式:</label>
                <select id="viewMode">
                    <option value="basic">基础视图</option>
                    <option value="auxiliary">辅助线视图</option>
                    <option value="vector">向量分析视图</option>
                </select>
            </div>

            <!-- Construction Steps Slider -->
            <div>
                <label for="constructionStep">构造步骤:</label>
                <input type="range" id="constructionStep" min="0" max="5" value="0" step="1">
                <div id="stepDescription">空画布</div>
            </div>

            <!-- Dimension Lock Buttons -->
            <div class="button-group">
                <button id="lockCF">锁定CF=2</button>
                <button id="lockAE">锁定AE=3</button>
            </div>

            <!-- Color Picker -->
            <div>
                <label for="focusColor">重点元素颜色:</label>
                <input type="color" id="focusColor" value="#00FF9D">
            </div>

            <!-- Measurement Panel -->
            <div class="measurement-panel">
                <h3>动态测量</h3>
                <div class="measurement-item">BE长度: <span id="beLength" class="highlight">-</span></div>
                <div class="measurement-item">∠CEG: <span id="angleCEG" class="highlight">-</span>°</div>
                <div class="measurement-item">∠AGE: <span id="angleAGE" class="highlight">-</span>°</div>
                <div class="measurement-item">比例: <span id="angleRatio" class="highlight">-</span></div>
            </div>

            <!-- Proof Tools -->
            <button id="showProof">显示证明过程</button>
        </div>
    </div>

    <script>
        // GeoGebra Applet Initialization
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize GeoGebra applet
            const parameters = {
                "appName": "classic",
                "width": 800,
                "height": 600,
                "showToolBar": true,
                "showAlgebraInput": false,
                "showMenuBar": false,
                "allowStyleBar": true,
                "enable3d": false,
                "language": "zh-CN",
                "appletOnLoad": function(api) {
                    // Store the API reference in a local scope
                    const ggb = api;
                    
                    // Initialize the construction
                    initializeConstruction(ggb);
                    
                    // Set up event listeners
                    setupEventListeners(ggb);
                }
            };
            
            const applet = new GGBApplet(parameters, true);
            applet.inject('geogebra-container');
        });

        // Construction initialization
        function initializeConstruction(ggb) {
            // Create basic parallelogram
            ggb.evalCommand('A = (0, 0)');
            ggb.evalCommand('B = (5, 0)');
            ggb.evalCommand('D = (2, 3)');
            ggb.evalCommand('C = B + D - A');
            ggb.evalCommand('Polygon(A,B,C,D)');
            
            // Create perpendicular AE
            ggb.evalCommand('E = Point(Line(B, C))');
            ggb.evalCommand('PerpendicularLine(A, Line(B, C))');
            
            // Create midpoint F
            ggb.evalCommand('sCE = Segment(C, E)');
            ggb.evalCommand('F = Midpoint(sCE)');
            
            // Create point G with angle condition
            createPointG(ggb);
            
            // Create DF, EG, AG lines
            ggb.evalCommand('Line(D, F)');
            ggb.evalCommand('Line(E, G)');
            ggb.evalCommand('Line(A, G)');
            
            // Set initial styles
            ggb.setColor('A', 255, 0, 0);
            ggb.setPointStyle('F', 5); // Large point style
            ggb.setPointStyle('G', 5);
            ggb.setLineThickness('Line(A, G)', 3);
            ggb.setLineThickness('Line(E, G)', 3);
            
            // Hide intermediate objects
            ggb.setVisible('sCE', false);
        }

        // Create point G with angle condition
        function createPointG(ggb) {
            // Create slider for parameterized point
            ggb.evalCommand('t = Slider(0, 1, 0.01, 0, 100, false, true, false)');
            ggb.evalCommand('X = Point(Segment(C, D), t)');
            
            // Calculate angle difference
            ggb.evalCommand('angle1 = Angle(A, E, C)');
            ggb.evalCommand('angle2 = Angle(A, X, D)');
            ggb.evalCommand('diff = abs(angle1 - angle2)');
            
            // Create condition for G point
            ggb.evalCommand('G = If(diff < 0.5, X, undefined)');
            
            // Hide auxiliary objects
            ggb.setVisible('t', false);
            ggb.setVisible('X', false);
            ggb.setVisible('diff', false);
        }

        // Set up event listeners
        function setupEventListeners(ggb) {
            // View mode selector
            document.getElementById('viewMode').addEventListener('change', function(e) {
                switch(e.target.value) {
                    case 'basic':
                        ggb.evalCommand('SetVisibleInView(Line(D, F), 1, false)');
                        break;
                    case 'auxiliary':
                        ggb.evalCommand('SetVisibleInView(Line(D, F), 1, true)');
                        break;
                    case 'vector':
                        // Additional vector analysis views could be added here
                        break;
                }
            });

            // Construction steps slider
            const stepDescriptions = [
                '空画布',
                '平行四边形',
                '垂线AE',
                '关键点F',
                '智能点G',
                '最终构造'
            ];
            
            document.getElementById('constructionStep').addEventListener('input', function(e) {
                const step = parseInt(e.target.value);
                document.getElementById('stepDescription').textContent = stepDescriptions[step];
                
                // Show/hide elements based on step
                const elements = ['A', 'B', 'C', 'D', 'Line(A, B)', 'Line(B, C)', 
                                 'Line(C, D)', 'Line(D, A)', 'E', 'Line(A, E)', 
                                 'F', 'G', 'Line(D, F)', 'Line(E, G)', 'Line(A, G)'];
                
                elements.forEach((el, index) => {
                    ggb.setVisible(el, index <= step * 3); // Rough mapping
                });
            });

            // Dimension lock buttons
            document.getElementById('lockCF').addEventListener('click', function() {
                ggb.evalCommand('SetFixed(F, true)');
                ggb.evalCommand('SetDynamicColor(F, 255, 255, 0)');
            });

            document.getElementById('lockAE').addEventListener('click', function() {
                ggb.evalCommand('SetFixed(Line(A, E), true)');
                ggb.evalCommand('SetDynamicColor(Line(A, E), 255, 255, 0)');
            });

            // Color picker
            document.getElementById('focusColor').addEventListener('input', function(e) {
                const color = e.target.value;
                const r = parseInt(color.substr(1, 2), 16);
                const g = parseInt(color.substr(3, 2), 16);
                const b = parseInt(color.substr(5, 2), 16);
                
                ggb.setColor('G', r, g, b);
                ggb.setColor('F', r, g, b);
                ggb.setColor('Line(A, G)', r, g, b);
            });

            // Show proof button
            document.getElementById('showProof').addEventListener('click', function() {
                alert('证明过程:\n1. 证明△CEG ∽ △AGE\n2. 通过角度关系得出∠CEG = 1/2∠AGE');
            });

            // Update measurements periodically
            setInterval(() => updateMeasurements(ggb), 500);
        }

        // Update measurement displays
        function updateMeasurements(ggb) {
            try {
                const beLength = ggb.getValue('Distance(B, E)');
                const angleCEG = ggb.getValue('Angle(C, E, G)');
                const angleAGE = ggb.getValue('Angle(A, G, E)');
                const ratio = angleAGE !== 0 ? angleCEG / angleAGE : 0;
                
                document.getElementById('beLength').textContent = beLength.toFixed(2);
                document.getElementById('angleCEG').textContent = angleCEG.toFixed(1);
                document.getElementById('angleAGE').textContent = angleAGE.toFixed(1);
                document.getElementById('angleRatio').textContent = ratio.toFixed(3);
            } catch (e) {
                console.log('Measurement update error:', e);
            }
        }
    </script>
</body>
</html>